<template>
  <div class="banner animate__fadeIn">
    <section class="swiper-container swiper-banner">
      <article class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in list" :key="index">
          <!-- 图片 -->
          <template v-if="item.type === '1'">
            <div class="mask mask-light"></div>
            <a class="a" :href="item.url" target="_blank" v-if="item.url">
              <img :src="item.imageUrl" class="imgBanner" />
            </a>
            <img :src="item.imageUrl" class="imgBanner" v-else />
          </template>
          <template v-else>
            <div class="mask" v-if="maskInfo">
              <div class="logo">
                <img src="@/assets/img/logo-big.svg" alt="" />
              </div>
              <div class="t1">
                {{ maskTitle[0] }}
                <br />
                {{ maskTitle[1] }}
              </div>
              <div class="t2">
                <p class="t2_i">
                  <img src="@/assets/images/icon_date.png" alt="" class="img" />
                  <span>{{ maskDate }}</span>
                </p>
                <p class="t2_i">
                  <img src="@/assets/images/icon_address.png" alt="" class="img" />
                  <span>{{ maskAddress }}</span>
                </p>
              </div>
            </div>
            <video :src="item.videoUrl" class="video" autoplay muted loop preload></video>
          </template>
        </div>
      </article>
      <!-- 分页器 -->
      <div class="swiper-pagination xs-hide"></div>
    </section>
  </div>
</template>

<script>
import { getList, getMaskInfo } from "@/api/banner";
import util from "@/libs/util"
export default {
  data() {
    return {
      list: [],
      form: {
        pushLocation: 1001, //pc 1001,wap 2001
        orderByColumn: "homeSortOrder",
        isAsc: "asc",
      },
      mySwiper: null,
      maskInfo:null
    };
  },
  computed: {
    maskTitle() { 
      if (this.maskInfo) {
        const titleCnArr = this.maskInfo.title.split('##')
        const titleEnArr = this.maskInfo.titleEn.split('##')
        const titleCn = {
          "0": titleCnArr[0],
          "1":titleCnArr[1]
        }
        const titleEn = {
          "0": titleEnArr[0],
          "1":titleEnArr[1]
        }
        
        return this.localeCn?titleCn:titleEn
      }
    },
    maskDate() { 
      if (!this.maskInfo) return
      const dateCn=this.dateStartEnd(this.maskInfo.startTime,this.maskInfo.endTime)
      const dateEn=this.dateStartEndEn(this.maskInfo.startTime,this.maskInfo.endTime)
      return this.localeCn?dateCn:dateEn
    },
    maskAddress() { 
      if (!this.maskInfo) return
      return this.localeCn?this.maskInfo.address:this.maskInfo.addressEn
    }
  },
  mounted() {
    this.getBanner();
    this.getMaskFun();
  },
  methods: {
    getBanner() {
      // 如果是中文手机端
      if (this.isMobile) {
        this.form.pushLocation = 2001;
      }
      // 如果是英文
      if (!this.localeCn) {
        this.form.pushLocation = 1101;
        // 如果是英文手机端
        if (this.isMobile) {
          this.form.pushLocation = 2101;
        }
      }
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.list = res.data;
          this.initSwiper();
        }
      });
    },
    getMaskFun() {
      this.invoke(getMaskInfo).then((res) => {
        if (res && res.code == 200) {
          this.maskInfo = res.data;
        }
      });
    },
    initSwiper() {
      this.$nextTick(() => {
        if (this.mySwiper && this.mySwiper.destroy) {
          this.mySwiper.destroy(true, true);
        }
        this.mySwiper = new Swiper(".swiper-banner", {
          spaceBetween: 0,
          pagination: ".swiper-banner .swiper-pagination",
          paginationClickable: true,
        //  autoplay: 5000,
          loop: true,
          autoplayDisableOnInteraction: false, //手动播放后继续自动播放
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  overflow: hidden;
  position: relative;
  a {
    width: 100%;
  }

  :deep(.swiper-pagination) {
    bottom: 44px;
    &-bullet {
      width: 23px;
      height: 4px;
      background: #ffffff;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      margin: 0 12px;
      &-active {
        background-color: #e35191;
      }
    }
  }

  .swiper-banner {
    width: 100%;
    height: 100%;

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      .imgBanner {
        width: 100vw;
		height: 100vh;
      }
      .video {
        width: 100vw;
		height: 100vh;
        object-fit: cover;
      }
    }
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    &-light{
      background-color: rgba(0, 0, 0, 0.2);
    }
    .logo {
      margin-bottom: 65px;
      margin-top: 120px;
    }
    .t1 {
      font-size: 50px;
      color: #fff;
      margin-bottom: 65px;
      text-align: center;
      font-weight: bold;
    }
    .t2 {
      font-size: 24px;
      color: #fff;
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      &_i {
        display: flex;
        align-items: center;
        margin: 0;
        .img {
          width: 24px;
          margin-right: 10px;
        }
        &:first-child {
          margin-bottom: 30px;
        }
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    :deep(.swiper-pagination) {
      bottom: scale(44px);
    }
    .mask {
      .logo {
        margin-bottom: scale(50px);
        margin-top: scale(180px);
      }
      .t1 {
        font-size: scale(60px);
      }
      .t2 {
        font-size: scale(24px);
        &_i {
          .img {
            width: scale(24px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    :deep(.swiper-pagination) {
      bottom: scale(44px);
    }
    .mask {
      .logo {
        margin-bottom: scale(50px);
        margin-top: scale(120px);
      }
      .t1 {
        font-size: scale(60px);
      }
      .t2 {
        font-size: scale(24px);
        &_i {
          .img {
            width: scale(24px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    :deep(.swiper-pagination) {
      bottom: scale(44px);
    }
    .mask {
      .logo {
        margin-bottom: scale(50px);
        margin-top: scale(220px);
      }
      .t1 {
        font-size: scale(50px);
        margin-bottom: scale(50px);
      }
      .t2 {
        font-size: scale(24px);
        &_i {
          .img {
            width: scale(24px);
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    :deep(.swiper-pagination) {
      bottom: scale(44px);
    }
	.swiper-banner {
	  width: 100%;
	  height: 100%;
	
	  .swiper-slide {
	    .imgBanner {
	      width: 100vw;
		   height: calc((100vw * 627) / 390);
		
	    }
	    .video {
	      width: 100vw;
			 height: calc((100vw * 627) / 390);
	    }
	  }
	}
    .mask {
		 height: calc((100vw * 627) / 390);
      .logo {
        width: scale(330px);
		
        margin-bottom: scale(65px);
        margin-top: scale(120px);
      }
      .t1 {
        font-size: scale(60px);
      }
      .t2 {
        font-size: 14px;
        &_i {
          .img {
            width: 16px;
          }
        }
      }
    }
  }
}
</style>
